<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" class="search-form" inline>
        <Form-item label="单号：" prop="odd_num">
          <Input
            v-model="searchForm.odd_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item label="状态：" prop="status">
          <Select v-model="searchForm.status" style="width: 200px">
            <Option :key="-1" :value="-1">全部</Option>
            <Option v-for="(item,index) in statusList" :key="index" :value="item.value">{{ item.title }}</Option>
          </Select>
        </Form-item>
        <Form-item label="节点：" prop="node_id">
          <Select v-model="searchForm.node_id" :disabled="disableNodeId" multiple style="width: 320px">
            <Option :key="-1" :value="-1">全部</Option>
            <Option
              v-for="item in workflowNodeList"
              :key="item.id"
              :value="item.id"
            >{{ item.node_name }}
            </Option>
          </Select>
        </Form-item>
        <Form-item label="日期：" prop="date_time">
          <DatePicker
            v-model="searchForm.start_date_time"
            placeholder="请选择开始日期"
            style="width: 200px"
            type="date"
          ></DatePicker>
          <DatePicker
            v-model="searchForm.end_date_time"
            placeholder="请选择结束日期"
            style="width: 200px"
            type="date"
          ></DatePicker>
        </Form-item>
        <Form-item style="margin-left:-70px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button icon="md-refresh" @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <Button
        :disabled="exportBtnDisable"
        icon="md-cloud-download"
        type="primary"
        @click="exportTyreOutMaterial"
      >导出
      </Button>
      <Button
        :disabled="addButtonDisabled"
        icon="ios-add"
        target="_self"
        type="primary"
        @click="toAdd"
      >添加
      </Button>
      <!-- <Button @click="delAll" icon="md-trash" type="error">删除</Button> -->
    </div>
    <div class="table">
      <!-- <Row>
        <Alert show-icon>
          已选择 <span class="select-count">{{selectCount}}</span> 项
          <a @click="clearSelectAll" class="select-clear">清空</a>
        </Alert>
      </Row>-->
      <!-- <Row>
        <Table
          :columns="columns"
          :data="data"
          :loading="loading"
          @on-selection-change="showSelect"
          border
          ref="table"
          size="small"
        >
          <template slot="action" slot-scope="{ row, index }">
            <Button :style="row.addStyle" @click="preview(row)" ghost type="text">查看</Button>
            <Button
              :disabled="row.editDisabled"
              :style="row.editStyle"
              @click="edit(row)"
              ghost
              type="text"
            >编辑
            </Button>
            <Button
              :disabled="row.delDisabled"
              :style="row.delStyle"
              @click="del(row)"
              ghost
              type="text"
            >删除
            </Button>
          </template>
        </Table>
      </Row>
      <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          @on-change="changePage"
          show-total
        />
      </Row> -->
      <vxe-table
        id="salaryTable"
        ref="xTable"
        :align="allAlign"
        :data="data"
        :height="height"
        :loading="loading"
        border
        highlight-hover-row
        keep-source
        show-overflow
        size="small"
      >
        <vxe-table-column field="odd_num" sortable title="单号" width="200"></vxe-table-column>
        <vxe-table-column field="out_time" sortable title="出库时间" width="200"></vxe-table-column>
        <vxe-table-column field="fleet" sortable title="车队" width="200"></vxe-table-column>
        <vxe-table-column field="process_node" sortable title="流程节点" width="200"></vxe-table-column>
        <vxe-table-column field="user_id" sortable title="操作人" width="120"></vxe-table-column>
        <vxe-table-column field="status" sortable title="审核状态" width="120">
          <template v-slot="{ row }">
            <template v-if="row.status === 0">
              <vxe-button icon="vxe-icon--dot my-green">结束</vxe-button>
            </template>
            <template v-else-if="row.status === 1">
              <vxe-button icon="vxe-icon--dot my-info">待提交</vxe-button>
            </template>
            <template v-else-if="row.status === 2">
              <vxe-button icon="vxe-icon--dot my-warning">待审核</vxe-button>
            </template>
            <template v-else-if="row.status === 4">
              <vxe-button icon="vxe-icon--dot my-danger">审核未通过</vxe-button>
            </template>
          </template>
        </vxe-table-column>
        <vxe-table-column field="created_at" sortable title="创建时间" width="200"></vxe-table-column>
        <vxe-table-column fixed="right" show-overflow title="操作" width="200">
          <template v-slot="{ row }">
            <vxe-button :style="row.addStyle" icon="fa fa-edit" type="text" @click="preview(row)">查看</vxe-button>
            <vxe-button
              :disabled="row.editDisabled"
              :style="row.editStyle"
              icon="fa fa-edit"
              type="text"
              @click="edit(row)">编辑
            </vxe-button>
            <vxe-button
              :disabled="row.delDisabled"
              :style="row.delStyle"
              icon="fa fa-trash-o"
              type="text"
              @click="del(row)">删除
            </vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </Card>
</template>
<script>
import {delTyreOutMaterial, toAuditTyreOut, tyreOutMaterialList, workflowData} from '../../../api/material'
import {dictData} from '../../../api/insure'

export default {
  data() {
    return {
      height: '550',
      allAlign: 'center',
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      exportBtnDisable: false,
      // columns: [
      //   // {
      //   //   type: 'selection',
      //   //   width: 60,
      //   //   align: 'center',
      //   //   fixed: 'left'
      //   // },
      //   {
      //     type: 'index',
      //     width: 60,
      //     align: 'center',
      //     fixed: 'left'
      //   },
      //   {
      //     title: '单号',
      //     key: 'odd_num',
      //     width: 220,
      //     align: 'left'
      //   },
      //   {
      //     title: '出库时间',
      //     key: 'out_time',
      //     width: 200,
      //     align: 'center'
      //   },
      //   {
      //     title: '车队',
      //     key: 'fleet',
      //     width: 170,
      //     align: 'left'
      //   },
      //   {
      //     title: '流程节点',
      //     key: 'process_node',
      //     width: 270,
      //     align: 'left'
      //   },
      //   {
      //     title: '操作人',
      //     key: 'user_id',
      //     width: 270,
      //     align: 'left'
      //   },
      //   {
      //     title: '创建时间',
      //     key: 'created_at',
      //     width: 200,
      //     align: 'right'
      //   },
      //   {
      //     title: '审核状态',
      //     key: 'status',
      //     fixed: 'right',
      //     width: 150,
      //     render: (h, params) => {
      //       let editButton
      //       let edit_button = ''
      //       const row = params.row
      //       const color =
      //         row.status === 0
      //           ? 'success'
      //           : row.status === 4
      //           ? 'error'
      //           : row.status === 1
      //             ? 'info'
      //             : 'warning'
      //       const text = row.status_title
      //       edit_button = h(
      //         'Tag',
      //         {
      //           props: {
      //             type: 'dot',
      //             color: color
      //           }
      //         },
      //         text
      //       )
      //       return edit_button
      //     }
      //   },
      //   {
      //     title: '操作',
      //     slot: 'action',
      //     width: 270,
      //     fixed: 'right',
      //     align: 'center'
      //   }
      // ],
      data: [],
      role_id: [],
      workflowNodeList: [],
      dict: [],
      addButtonDisabled: false,
      disableNodeId: true,
      statusList: [{title: '待提交', value: 1}, {title: '待审核', value: 2}, {title: '已审核', value: 3}, {
        title: '审核未通过',
        value: 4
      }]
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'tyreOutMaterial') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getTyreOutMaterialList()
      // this.clearSelectAll()
    },
    // clearSelectAll() {
    //   this.$refs.table.selectAll(false)
    // },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          delTyreOutMaterial(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getTyreOutMaterialList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          delTyreOutMaterial(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getTyreOutMaterialList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editTyreOutMaterial',
        params: {
          id: row.id
        }
      })
    },
    //导出
    exportTyreOutMaterial() {
      const start_date_time = this.searchForm.start_date_time
      const end_date_time = this.searchForm.end_date_time
      const status = this.searchForm.status ? this.searchForm.status : ''
      const node_id = this.searchForm.node_id ? this.searchForm.node_id : ''
      const odd_num = this.searchForm.odd_num ? this.searchForm.odd_num : ''
      let start_date = ''
      let end_date = ''
      if (start_date_time) {
        const start_d = new Date(start_date_time)
        start_date =
          start_d.getFullYear() +
          '-' +
          (start_d.getMonth() + 1) +
          '-' +
          start_d.getDate()
      }
      if (end_date_time) {
        const end_d = new Date(end_date_time)
        end_date =
          end_d.getFullYear() +
          '-' +
          (end_d.getMonth() + 1) +
          '-' +
          end_d.getDate()
      }
      window.location.href =
        '/api/exportTyreOutMaterial?status=' +
        status +
        '&node_id=' +
        node_id +
        '&odd_num=' +
        odd_num +
        '&start_date_time=' +
        start_date +
        '&end_date_time=' +
        end_date
    },
    getDictData() {
      dictData({title: '申请单状态'}).then(res => {
        if (res.data.result) {
          this.dict = res.data.result
        }
      })
    },
    getTyreOutMaterialList() {
      this.loading = true
      // this.clearSelectAll()
      tyreOutMaterialList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          // this.total = res.data.count
          this.role_id = res.data.role
          this.searchForm.node_id = res.data.nodes.length > 0 ? res.data.nodes : '-1'
          if (res.data.role_name.indexOf('Superadmin') != -1) {
            this.disableNodeId = false
          }
          if (res.data.role_name.indexOf('物资-发起人') == -1) {
            this.addButtonDisabled = true
            this.statusList = [{title: '待审核', value: 2}, {title: '已审核', value: 3}]
          } else {
            this.statusList = [{title: '待提交', value: 1}, {title: '待审核', value: 2}, {
              title: '已审核',
              value: 3
            }, {title: '审核未通过', value: 4}]
          }
        }
      })
    },
    getWorkflow() {
      workflowData({title: '轮胎出库单'}).then(res => {
        if (res.data.result) {
          this.workflowNodeList = res.data.result
        }
      })
    },
    goToAudit(row) {
      toAuditTyreOut({status: 2, id: row.id, node_id: row.node_id}).then(
        res => {
          if (res.data.result) {
            this.$Message.success('提交成功!')
            this.getOutMaterialList()
          }
        }
      )
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getTyreOutMaterialList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getTyreOutMaterialList()
    },
    init() {
      this.getTyreOutMaterialList()
      this.getWorkflow()
      this.getDictData()
    },
    preview(row) {
      this.$router.push({
        name: 'previewTyreOutMaterial',
        params: {
          id: row.id
        }
      })
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.$router.push({
        name: 'addTyreOutMaterial'
      })
    }
  }
}
</script>
